<template>
  <div class="accessory-list">
    <h2>手机配件库存列表</h2>
    <table>
      <thead>
        <tr>
          <th>配件名称</th>
          <th>库存</th>
          <th>价格（元）</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in accessories" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.stock }}</td>
          <td>
            <input type="number" v-model.number="item.price" min="0" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Page2',
  data() {
    return {
      accessories: [
        { name: '听筒', stock: 50, price: 50 },
        { name: '主摄像头', stock: 20, price: 200 },
        { name: '副摄像头', stock: 25, price: 150 },
        { name: '扩音器', stock: 40, price: 80 },
        { name: '屏幕', stock: 10, price: 600 },
        { name: '电池', stock: 35, price: 120 },
      ],
    };
  },
};
</script>

<style scoped>
.accessory-list {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
input[type="number"] {
  width: 80px;
  padding: 4px;
}
</style>
